<template>
  <grid-layout
    class="house-detail"
    :layout="layout"
    :gutter="0"
    :layout-item-style="{ padding: 0 }"
    style="width: 100%; height: 100%"
  >
    <template #yard>
      <yard-list v-model="yardId" :api="getYardListAsync" class="yard-list" @change="onYardChange" />
    </template>
    <template #building>
      <building-list
        v-model="buildingId"
        :yard-id="yardId"
        class="building-list"
        @change="onChange"
        @updateUnitList="updateUnitList"
      />
    </template>
    <template #cell-room>
      <room-list-wrap
        ref="RoomListWrap"
        v-if="cellList && cellList.length"
        v-model="roomId"
        :yard-id="yardId"
        :cell-id="cellId"
        :cell-list="cellList"
        :radio-types="radioTypes"
        style="height: 100%"
      />
      <empty v-else />
    </template>
    <template #people>
      <room-people :roomId="roomId" @onLocate="onLocate" />
    </template>
    <template #count>
      <div>
        <housing-statistical
          title="实有房屋统计"
          chart-name="房屋总数"
          :containerId="`actual${Date.now().toString(36)}`"
          :data-list="actualData"
        />
        <housing-statistical
          title="商用房屋统计"
          chart-name="房屋总数"
          :data-list="commercialData"
          :containerId="`commercial${Date.now().toString(36)}`"
        />
        <split-title text="出租房信息" />
        <rental-information :value="yardId" :img-show="false" />
        <split-title text="租住到期提醒" style="margin-top: 15px" />
        <rent-remind :value="yardId" :col-span="12" />
      </div>
    </template>
  </grid-layout>
</template>

<script>
import { realityHouseRoomDwellingStateByAreaCod } from '@gis/lib/api';
import { getTotal } from '@gis/lib/utils/index.js';
import Empty from '@gis/lib/components/Empty/index.vue';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import SplitLine from '@gis/lib/components/splitter/split-line.vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

import YardList from '../house-list/components/yard-list.vue';

import BuildingList from './components/building-list.vue';
import RoomListWrap from './components/room-list-wrap.vue';
import RoomPeople from './components/room-people.vue';
import HousingStatistical from './components/housing-statistical.vue';
import RentRemind from './components/rent-remind.vue';
import RentalInformation from './components/rental-information.vue';
import { colorEnum } from './assets/enum.js';

export default {
  name: 'house-detail',
  components: {
    SplitTitle,
    RoomPeople,
    RentRemind,
    HousingStatistical,
    RentalInformation,
    SplitLine,
    Empty,
    RoomListWrap,
    BuildingList,
    YardList,
    GridLayout,
  },
  mixins: [areaCodeMixin],
  props: {
    yard_id: { type: String, default: '' },
    radioTypes: { type: Array, default: undefined },
    getYardListAsync: { type: Function, default: undefined },
  },
  data() {
    return {
      yardId: '', //小区
      buildingId: '', //几栋
      cellId: '', //几单元
      roomId: '', //房间号id
      count: { building: 0, unit: 0, floor: 0, room: 0 },
      cellList: [],
      layout: [
        { name: 'yard', colSpan: 4 },
        { name: 'building', colSpan: 3 },
        { name: 'cell-room', colSpan: 9 },
        { name: 'people', colSpan: 4 },
        { name: 'count', colSpan: 4, style: { padding: '15px' } },
      ],
      actualData: [],
      colorEnum,
      commercialData: [],
      commercialColorEnum: ['#EF4E1D', '#22C563', '#FFB815', '#5F2DCF'],
    };
  },
  computed: {
    /*actualEchartsOptions() {
      return {
        legend: {
          data: this.actualData,
          orient: 'vertical',
        },
      };
    },*/
  },
  watch: {
    yard_id: {
      immediate: true,
      handler(yard_id) {
        if (this.yardId !== yard_id) {
          this.yardId = yard_id;
          this.onYardChange(yard_id);
        }
      },
    },
  },
  methods: {
    // 实有房屋
    async getRealityHouseData(params) {
      const { data = [] } = await realityHouseRoomDwellingStateByAreaCod(params);
      if (data && data.length) {
        this.actualData = data.map((item) => Object.assign({}, item, { color: this.colorEnum[item.flag] }));
      }
    },
    // 商用房屋
    async getCommercial(params) {
      const { data = [] } = await realityHouseRoomDwellingStateByAreaCod(params);

      let commercialList = data;
      let i = commercialList.findIndex((item) => item.name == '其他');
      let other = i >= 0 ? commercialList.splice(i, 1)[0] : { name: '其他', value: 0 };
      let threeData = commercialList.splice(0, 3);
      other.value += getTotal(commercialList, (item) => item.value);
      this.commercialData = threeData.concat([other]).map((item, index) =>
        Object.assign({}, item, {
          color: this.commercialColorEnum[index % this.commercialColorEnum.length],
          name: item.name == '民宿' ? '网约房' : item.name,
        }),
      );
    },
    updateUnitList(data) {
      this.cellList = data || [];
      if (this.cellList.length && this.cellList.every((item) => item.id !== this.cellId)) {
        this.cellId = this.cellList[0].id;
      }
    },
    onYardChange(val) {
      console.log(val, '改变');
      this.getRealityHouseData(Object.assign({}, this.apiParams, { yard_id: val, type: 1 }));
      this.getCommercial(Object.assign({}, this.apiParams, { yard_id: val, type: 2 }));
    },
    onChange(data) {
      this.count = Object.assign({}, this.count, data);
    },
    onLocate(data) {
      // console.log(data);
      this.$refs.RoomListWrap.dwellingState = '';
      this.$refs.RoomListWrap.livingType = [];
      this.buildingId = data.building_id;
      this.yardId = data.yard_id;
      this.cellId = data.cell_id;
      this.roomId = data.room_id;
    },
  },
};
</script>

<style lang="less">
.house-detail {
  .block-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    line-height: 40px;
  }
}
</style>
